<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template Name</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    function staticNav() {
        var sidenavHeight = $("#sidenav").height(); //Get height of sidenav
        var winHeight = $(window).height(); //Get height of viewport
        var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; //Check for IE6

        if (browserIE6) { //if IE6...
            $("#sidenav").css({'position' : 'absolute'});  //reset the sidenav to be absolute
        } else { //if not IE6...
            $("#sidenav").css({'position' : 'fixed'}); //reset the sidenav to be fixed
        }

        if (sidenavHeight > winHeight) { //If sidenav is taller than viewport...
            $("#sidenav").css({'position' : 'static'}); //switch the fixed positioning to static. Say good bye to sticky nav!
        }
    }

    staticNav(); //Execute function on load

    $(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
        staticNav();
    });

});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
						   		   
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
				
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
		
		return false;
	});
	
	
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
		
		return false;
	});
 
	
});
</script>


</head>

<body>
<div class="container">
  <div id="sidenav"> <img src="images/logo.gif" alt="" />
    <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="latest.html">Latest Collection</a></li>
            <li><a href="testimonial.html">Testimonial</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
</div>
  <div id="content"> <img src="images/topbar.jpg" alt="" />
    <!--Content Goes Here-->
    <div id="whitebox">
      <div class="paddingbox">
        <h1>Latest Collection</h1>
        <p><span class="goldtext">Autem vel eum iriure dolor in hendrerit in vulputate<br />
      </span>Velit esse molestie consequat, vel illum dolore eu feugiat nula facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdie. doming id quod. mazim placerat facer possim assum vel eum iriure dolor in hendrerit in vulputate velit esse molestie. Equat, vel illum dolore eu feugiat nulla facilisis at vero autem vel eum iriure dolor in hendrerit in vulputate doming id quod.         
                
        <p>        
        <div style="height:160px; margin-top: 10px;">
          <div class="collectionbox">
            <img src="images/c01.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div><div class="collectionbox">
            <img src="images/c02.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div><div class="collectionbox">
            <img src="images/c03.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div>

        </div> 
       <div style="height:160px; margin-top: 10px; ">
          <div class="collectionbox">
            <img src="images/c04.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div><div class="collectionbox">
            <img src="images/c05.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div><div class="collectionbox">
            <img src="images/c06.jpg" width="159" height="130" alt="" />
            <a href="#?w=600" rel="popup1" class="poplight">Learn More</a>
          </div>

        </div>
          <!--POPUP START-->
<div id="popup1" class="popup_block">
    <h1>Learn More</h1>
    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdie. doming id quod. mazim placerat facer possim assum vel eum iriure dolor in hendrerit in vulputate velit esse molestie cons. Equat, vel illum dolore eu feugiat nulla facilisis at vero autem vel eum iriure dolor. in hendrerit in vulputate. </p>
    <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
    </div>             
        </div>
    </div>
    <div id="footer">© Copyright Company Name. •  All Rights Reserved</div>
  </div>
</div>
<div>
</div>
</body>
</html>
